<template>
  <PageWrapper class="high-form">
    <CollapseContainer title="查询条件">
      <BasicForm @register="registerForm">
      </BasicForm>
    </CollapseContainer>
    <CollapseContainer title="项目统计" class="!mb-4">
      <ProjectSummary :data="summaryData" class="enter-y" :loading="loading" />
      <ProjectMonth :chart-data="monthData" class="enter-y" :loading="loading" />
      <ProjectDetail :chart-data="detailData" class="enter-y" :loading="loading" />

    </CollapseContainer>
  </PageWrapper>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { BasicForm, useForm, } from '/@/components/Form/index';
import { PageWrapper } from '/@/components/Page';
import { CollapseContainer } from '/@/components/Container';

import ProjectSummary from './components/ProjectSummary.vue';
import ProjectDetail from './components/ProjectDetail.vue';
import ProjectMonth from './components/ProjectMonth.vue';

import { formSchema } from './data';
import { projectSummary, } from '/@/api/business/summary';

export default defineComponent({
  components: { PageWrapper, CollapseContainer, BasicForm, ProjectSummary, ProjectDetail, ProjectMonth, },
  emits: ['success', 'register'],
  setup() {
    //项目统计数据
    const summaryData = ref([
      {
        title: '进行中项目',
        key: 'count1',
        icon: 'total-sales|svg',
        value: 0,
      },
      {
        title: '新项目',
        key: 'count2',
        icon: 'visit-count|svg',
        value: 0,
      },
      {
        title: '完成项目',
        key: 'count3',
        icon: 'download-count|svg',
        value: 0,
      },
      {
        title: '续签率(%)',
        key: 'count4',
        icon: 'transaction|svg',
        value: 0,
      },
    ]);

    //每月项目情况
    const monthData = ref({
      series: [
        {
          name: '新项目',
          type: 'bar',
          barMaxWidth: 80,
          data: [],
        },
        {
          name: '完成项目',
          type: 'bar',
          barMaxWidth: 80,
          data: [],
        },
      ],
    });

    //项目明细数据
    const detailData = ref({
      xAxis: [],
      series: [
        {
          name: '进行中项目',
          type: 'bar',
          barMaxWidth: 80,
          data: [],
        },
        {
          name: '新项目',
          type: 'bar',
          barMaxWidth: 80,
          data: [],
        },
        {
          name: '完成项目',
          type: 'bar',
          barMaxWidth: 80,
          data: [],
        },
      ],
    });

    //查询
    const loading = ref(true); //正在加载，子页面不渲染
    const search = async () => {
      let param = await validate();
      const res = await projectSummary(param);

      summaryData.value.forEach((item) => {
        if (res[item.key]) {
          item.value = res[item.key];
        }
      });

      //项目明细数据
      detailData.value.xAxis = res.xaxis
      detailData.value.series[0].data = res.seriesData1 || [];
      detailData.value.series[1].data = res.seriesData2 || [];
      detailData.value.series[2].data = res.seriesData3 || [];
      monthData.value.series[0].data = res.monthData1 || [];
      monthData.value.series[1].data = res.monthData2 || [];
      loading.value = false

      console.log('项目统计->查询参数：', param);
      console.log('项目统计->返回数据：', detailData.value, monthData.value);
    }
    //主表单
    const [registerForm, { validate }] = useForm({
      schemas: formSchema,
      labelWidth: 100,
      showActionButtonGroup: true,
      submitFunc: search,
    });

    onMounted(() => {
      //默认查询
      search();
    });


    

    return {
      registerForm, validate, loading, summaryData, monthData, detailData,
    };
  },
});

</script>
